{"componentChunkName":"component---src-templates-slide-js","path":"/slides/skills/add-slides-to-gatsby","matchPath":"/slides/skills/add-slides-to-gatsby/*","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"id":"86a1435b-f2ec-551c-95bd-d01576020f40","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"add-slides-to-gatsby\",\n  \"title\": \"在 Gatsby 中添加幻灯片演示\",\n  \"theme\": \"dark\",\n  \"date\": \"2020-03-19 21:16:31\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst Notes = makeShortcode(\"Notes\");\nconst ChatBoxItem = makeShortcode(\"ChatBoxItem\");\nconst FullScreenCode = makeShortcode(\"FullScreenCode\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Slides with Gatsby\"), mdx(\"h3\", null, \"\\u5728 Gatsby \\u4E2D\\u6DFB\\u52A0\\u5E7B\\u706F\\u7247\\u6F14\\u793A\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u5148\\u770B\\u6F14\\u793A\"), mdx(\"video\", {\n    controls: true,\n    loop: true,\n    style: {\n      maxHeight: \"80vh\",\n      maxWidth: \"80vw\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/slides.mp4\",\n    type: \"video/mp4\"\n  })), mdx(\"hr\", null), mdx(\"h3\", null, \"1. \\u652F\\u6301\\u591A\\u79CD\\u653E\\u6620\\u6A21\\u5F0F\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u666E\\u901A\\u6A21\\u5F0F - \\u6B63\\u5E38\\u5168\\u9875\\u653E\\u6620\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6F14\\u793A\\u6A21\\u5F0F - \\u540C\\u6B65\\u64AD\\u653E\\u3001\\u591A\\u9875\\u9884\\u89C8\\u3001\\u67E5\\u770B\\u5907\\u6CE8\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7F51\\u683C - \\u7F29\\u653E\\u5C55\\u793A\\u3001\\u5FEB\\u901F\\u5B9A\\u4F4D\")), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"flex\\\",\": \"\",\n    \"margintop:\": \"\",\n    \"\\\"30px\\\"}}\": \"\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAArUlEQVQoz9WSPQqEMBSEY1ACibGytlObRKy8QFKKRRLB+19klhcQbIRd3GK3GIaXn4F8GcYYw5f1b4FKKWitIYSAlDLP59p1rusanPP7wKIoshtjEGPEcRzYtg3eezjnslJKCCFgXVfs+45lWd57MoWXZYmqqjBNE6y16Ps+O+2dojMfMaRLFDLPM8ZxxDAMzz+FuDVNk5243nC7YvvR2rRti67rngee7SDW1IQXQubtgv1OsUUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"1\",\n    \"title\": \"1\",\n    \"src\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"srcSet\": [\"/static/2e4b6630d8d1acb68225ecac0201d04d/2c191/1.png 259w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/86b01/1.png 518w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB/0lEQVQoz42SXW8SURCGz65x92wJqdH4N0ATDWiMNzVYUxFTaAsFW9ryjba1pmnxKzUxXhp/IBdccUFkAWHp7rLyOnu2fFR74Ukm78lkz7PzzgxjjOF/QpYkocE7QbjHcRyh4/H4UjDlaRzK802KlKfLa7i+FIPyIgNlhXLRNOUS4JFVsCcJhAtHsC0TlmVNgfOH8b1jaJVP4PkTaOWPQvn2AbT9L9OcRrqwcwQ5/wEPz37AsS2MRqOrK1RTZXD6mG8dkL4DT7+GmtgD36V79hA8R5qpQNsogKX3Eap9Q1dv42e7jW63O41Op4N+v0/A+C74ZgUC7OpaDmrsFYHpHi+S3RKUSA78WRJseQOh6ims8yGGwyFs2xbWJ+pWzXj2LbTSe2iFU6GisiRBcse4Fc/hwaMoAuEo/OslsEIN4bPvGNPD33O9m+/jzPL2oafpKtSXW1Azb+BLZHE7soIbj5ewEMuAJcsInXyFRdV1ez1hczKcCdiz7EJSJU/X85AWb4LJ12gFOFnwiZBVLtbm7r37ME0Tbephq9VCj8C6rmMwGFxMmaxp1c/QijVPybrkX7xiDz0NBgICUK/X0Wg00Gw2qVJd/MAbyuqOGIiaLHpKE5Z8/guQNAPKsgcMeottGAYBfokKh8b5dDhs9lC6BPinwr+A7nEhxsCAbTrT3B+klQoN8kuZzQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"7\",\n    \"title\": \"7\",\n    \"src\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"srcSet\": [\"/static/c39a10b4f63bbc25b6545c78aeb2c487/2c191/7.png 259w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/86b01/7.png 518w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"hr\", null), mdx(\"h3\", null, \"2. \\u652F\\u6301\\u5907\\u6CE8\"), mdx(\"p\", null, \"\\u53F3\\u4E0B\\u89D2\\u63A7\\u5236\\u6309\\u94AE\\uFF0C\\u6253\\u5F00\\u6F14\\u793A\\u6A21\\u5F0F\\u5373\\u53EF\\u5728\\u5E95\\u90E8\\u770B\\u5230\\u5907\\u6CE8\\u4FE1\\u606F\"), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"50vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"p\", null, \"\\u8FD9\\u91CC\\u662F\\u6CE8\\u91CA\")), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301 MDX \\u683C\\u5F0F\"), mdx(\"div\", {\n    style: {\n      display: \"flex\",\n      marginTop: \"30px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", null, \"\\u7528 React \\u5199\\u6587\\u6863\\u662F\\u4EC0\\u4E48\\u4F53\\u9A8C~~\"), mdx(\"li\", null, \"\\u66F4\\u5F3A\\u7684\\u8868\\u73B0\\u529B\"))), mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      marginLeft: 20\n    }\n  }, mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u76D6\\u623F\\u5B50\\u600E\\u4E48\\u9009\\u65BD\\u5DE5\\u961F \\uD83D\\uDEA7 \\uFF1F\"), mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u9760\\u8C31\\u3002\")))), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301\\u4EE3\\u7801\\u683C\\u5F0F\"), mdx(FullScreenCode, {\n    mdxType: \"FullScreenCode\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nfunction App() {\\n  return (<div>Hallo!</div>);\\n}\\nexport default App;\\n\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"theme":"dark","title":"在 Gatsby 中添加幻灯片演示"}}},"pageContext":{"matchPath":"/slides/skills/add-slides-to-gatsby/*","isCreatedByStatefulCreatePages":false,"fileAbsolutePath":"D:/ubug/storybook/content/slides/skills/add-slides-to-gatsby.md","id":"86a1435b-f2ec-551c-95bd-d01576020f40","parent":{"name":"add-slides-to-gatsby","sourceInstanceName":"slides"},"excerpt":"Slides with Gatsby 在 Gatsby 中添加幻灯片演示 先看演示 1. 支持多种放映模式 普通模式 - 正常全页放映 演示模式 - 同步播放、多页预览、查看备注 网格 - 缩放展示、快速定位 2. 支持备注 右下角控制按钮，打开演示模式即可在底部看到备注信息 这里是注释 3. 支持 MDX 格式 3. 支持代码格式 Thank You","fields":{"title":"在 Gatsby 中添加幻灯片演示","slug":"/slides/skills/add-slides-to-gatsby","description":null,"date":"2020-03-19","redirects":null,"datetime":"2020-03-19 21:16:31","categories":[],"series":null,"tags":[],"status":"online"},"frontmatter":{"published":true,"tags":null,"theme":"dark","slug":"add-slides-to-gatsby","date":"2020-03-19 21:16:31"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"add-slides-to-gatsby\",\n  \"title\": \"在 Gatsby 中添加幻灯片演示\",\n  \"theme\": \"dark\",\n  \"date\": \"2020-03-19 21:16:31\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst Notes = makeShortcode(\"Notes\");\nconst ChatBoxItem = makeShortcode(\"ChatBoxItem\");\nconst FullScreenCode = makeShortcode(\"FullScreenCode\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Slides with Gatsby\"), mdx(\"h3\", null, \"\\u5728 Gatsby \\u4E2D\\u6DFB\\u52A0\\u5E7B\\u706F\\u7247\\u6F14\\u793A\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u5148\\u770B\\u6F14\\u793A\"), mdx(\"video\", {\n    controls: true,\n    loop: true,\n    style: {\n      maxHeight: \"80vh\",\n      maxWidth: \"80vw\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/slides.mp4\",\n    type: \"video/mp4\"\n  })), mdx(\"hr\", null), mdx(\"h3\", null, \"1. \\u652F\\u6301\\u591A\\u79CD\\u653E\\u6620\\u6A21\\u5F0F\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u666E\\u901A\\u6A21\\u5F0F - \\u6B63\\u5E38\\u5168\\u9875\\u653E\\u6620\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6F14\\u793A\\u6A21\\u5F0F - \\u540C\\u6B65\\u64AD\\u653E\\u3001\\u591A\\u9875\\u9884\\u89C8\\u3001\\u67E5\\u770B\\u5907\\u6CE8\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7F51\\u683C - \\u7F29\\u653E\\u5C55\\u793A\\u3001\\u5FEB\\u901F\\u5B9A\\u4F4D\")), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"flex\\\",\": \"\",\n    \"margintop:\": \"\",\n    \"\\\"30px\\\"}}\": \"\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAArUlEQVQoz9WSPQqEMBSEY1ACibGytlObRKy8QFKKRRLB+19klhcQbIRd3GK3GIaXn4F8GcYYw5f1b4FKKWitIYSAlDLP59p1rusanPP7wKIoshtjEGPEcRzYtg3eezjnslJKCCFgXVfs+45lWd57MoWXZYmqqjBNE6y16Ps+O+2dojMfMaRLFDLPM8ZxxDAMzz+FuDVNk5243nC7YvvR2rRti67rngee7SDW1IQXQubtgv1OsUUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"1\",\n    \"title\": \"1\",\n    \"src\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"srcSet\": [\"/static/2e4b6630d8d1acb68225ecac0201d04d/2c191/1.png 259w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/86b01/1.png 518w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB/0lEQVQoz42SXW8SURCGz65x92wJqdH4N0ATDWiMNzVYUxFTaAsFW9ryjba1pmnxKzUxXhp/IBdccUFkAWHp7rLyOnu2fFR74Ukm78lkz7PzzgxjjOF/QpYkocE7QbjHcRyh4/H4UjDlaRzK802KlKfLa7i+FIPyIgNlhXLRNOUS4JFVsCcJhAtHsC0TlmVNgfOH8b1jaJVP4PkTaOWPQvn2AbT9L9OcRrqwcwQ5/wEPz37AsS2MRqOrK1RTZXD6mG8dkL4DT7+GmtgD36V79hA8R5qpQNsogKX3Eap9Q1dv42e7jW63O41Op4N+v0/A+C74ZgUC7OpaDmrsFYHpHi+S3RKUSA78WRJseQOh6ims8yGGwyFs2xbWJ+pWzXj2LbTSe2iFU6GisiRBcse4Fc/hwaMoAuEo/OslsEIN4bPvGNPD33O9m+/jzPL2oafpKtSXW1Azb+BLZHE7soIbj5ewEMuAJcsInXyFRdV1ez1hczKcCdiz7EJSJU/X85AWb4LJ12gFOFnwiZBVLtbm7r37ME0Tbephq9VCj8C6rmMwGFxMmaxp1c/QijVPybrkX7xiDz0NBgICUK/X0Wg00Gw2qVJd/MAbyuqOGIiaLHpKE5Z8/guQNAPKsgcMeottGAYBfokKh8b5dDhs9lC6BPinwr+A7nEhxsCAbTrT3B+klQoN8kuZzQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"7\",\n    \"title\": \"7\",\n    \"src\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"srcSet\": [\"/static/c39a10b4f63bbc25b6545c78aeb2c487/2c191/7.png 259w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/86b01/7.png 518w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"hr\", null), mdx(\"h3\", null, \"2. \\u652F\\u6301\\u5907\\u6CE8\"), mdx(\"p\", null, \"\\u53F3\\u4E0B\\u89D2\\u63A7\\u5236\\u6309\\u94AE\\uFF0C\\u6253\\u5F00\\u6F14\\u793A\\u6A21\\u5F0F\\u5373\\u53EF\\u5728\\u5E95\\u90E8\\u770B\\u5230\\u5907\\u6CE8\\u4FE1\\u606F\"), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"50vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"p\", null, \"\\u8FD9\\u91CC\\u662F\\u6CE8\\u91CA\")), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301 MDX \\u683C\\u5F0F\"), mdx(\"div\", {\n    style: {\n      display: \"flex\",\n      marginTop: \"30px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", null, \"\\u7528 React \\u5199\\u6587\\u6863\\u662F\\u4EC0\\u4E48\\u4F53\\u9A8C~~\"), mdx(\"li\", null, \"\\u66F4\\u5F3A\\u7684\\u8868\\u73B0\\u529B\"))), mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      marginLeft: 20\n    }\n  }, mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u76D6\\u623F\\u5B50\\u600E\\u4E48\\u9009\\u65BD\\u5DE5\\u961F \\uD83D\\uDEA7 \\uFF1F\"), mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u9760\\u8C31\\u3002\")))), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301\\u4EE3\\u7801\\u683C\\u5F0F\"), mdx(FullScreenCode, {\n    mdxType: \"FullScreenCode\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nfunction App() {\\n  return (<div>Hallo!</div>);\\n}\\nexport default App;\\n\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/slides/skills/add-slides-to-gatsby"}}}